<template>
  <div>
    <el-dialog
      :title="FormData.id?'编辑经纪':'添加经纪'"
      :visible="dialogVisible"
      @close="closeFn"
    >
      <el-form ref="form" :model="FormData" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="FormData.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="FormData.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="FormData.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="FormData.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="FormData.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="封面">

          <UploadImage ref="img" />
        </el-form-item>

      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" size="small" @click="submit">确定</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-row>

      </template>
    </el-dialog>

  </div>
</template>

<script>
import { addAgent, editAgent, getAgentById } from '@/api/agent/index'
import UploadImage from '@/components/UploadImage/index.vue'
export default {
  components: {
    UploadImage
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

      FormData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式不正确', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写地址', trigger: 'blur' },
          { min: 10, max: 30, message: '长度在 10 到 30个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写描述', trigger: 'blur' },
          { min: 10, max: 200, message: '长度在 10 到 200个字符', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    async getAgentById(id) {
      const res = await getAgentById(id)
      // console.log(94, res)
      this.FormData = res.data
      this.$refs.img.imgUrl = this.FormData.image
    },
    async  submit() {
      if (this.FormData.id) {
        this.FormData.image = this.$refs.img.imgUrl
        await editAgent(this.FormData)
      } else {
        await this.$refs.form.validate()
        this.FormData.image = this.$refs.img.fileList[0].url
        await addAgent(this.FormData)
      }

      this.closeFn()
      this.$emit('updateEvent')
    },
    closeFn() {
      this.$emit('update:dialogVisible', false)
      this.FormData = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      this.$refs.img.imgUrl = ''
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style>

</style>
